<template>
    <div>
        <div class="search">
            <van-search
                    v-model="keywords"
                    show-action

                    placeholder="请输入搜索关键词"
                    @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <div v-if="issearch">
            <div class="result" v-if="flag">
                <ul>
                    <li v-for="(item,index) in searchList" :key="index" @click="searchResult(item,item.songname)">

                        <div class="search-span">
                            <span>{{item.songname}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="history" v-else>
                <ul>
                    <li v-for="(item,index) in searchHis" :key="index">
                        {{item}}
                    </li>
                </ul>
            </div>
        </div>
        <router-view v-else></router-view>
    </div>
</template>

<script>
    import {getsearchDetail} from "../api/api";

    export default {
        name: "search",
        data() {
            return {
                keywords: "",
                searchList: [],
                searchHis: [],
                flag: false,
                issearch:true
            }
        },
        created() {
            if (localStorage.getItem('history1')) {
                this.searchHis = JSON.parse(localStorage.getItem('history1'));
            }
        },
        methods: {
            searchResult(item, name) {
                this.issearch = false;
                this.$router.push('/search?query='+name)
                if (!this.searchHis.some(item => item == name)) {
                    this.searchHis.push(name);
                }
                localStorage.setItem('history1', JSON.stringify(this.searchHis))
            },
            onSearch() {
                this.issearch = false;
                this.$router.push('/search?query='+this.keywords)
                if (!this.searchHis.some(item => item == this.keywords)){
                    this.searchHis.push(this.keywords);
                }
                localStorage.setItem('history1', JSON.stringify(this.searchHis))
            }
        },
        watch: {
            keywords() {
                this.issearch = true;
                if (this.keywords) {
                    this.flag = true;
                } else {
                    this.flag = false;
                }
                getsearchDetail(this.keywords).then(res => {
                    console.log(res);
                    this.searchList = res.song;
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .result {
        ul {
            li {

                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                border-bottom: 1px solid #eeeeee;

                .search-span {
                    width: 100%;
                    white-space: nowrap;
                    margin: 0 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 14px;
                }
            }

        }
    }

    .history {
        ul {
            li {
                width: 31.3%;
                height: 20px;
                background-color: #eeeeee;
                float: left;
                text-align: center;
                padding: 5px 0;
                margin: 10px 1%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
</style>